<template>
  <base-breadcrumb>
    <a-card class="mb20">
      <titleName title="安全验收表管理"></titleName>
      <a-form-model
        :model="formData"
        :labelCol="{ lg: { span: 6 }, sm: { span: 6 } }"
        :wrapperCol="{ lg: { span: 16 }, sm: { span: 16 } }"
      >
        <a-row :gutter="24">
          <a-col :md="8" :sm="8">
            <a-form-model-item label="所属分公司">
              <BaseInput disabled placeholder="请选择" v-model="formData.branchComName"></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :md="16" :sm="16">
            <div class="flex-row mb20">
              <h3>基础信息填写项</h3>
              <a-button class="ml20" type="primary" @click="addLine()">添加行</a-button>
            </div>
            <a-table :pagination="false" bordered :columns="columns" :data-source="dataSource">
              <template slot="name" slot-scope=" text,record">
                <BaseInput
                  v-if="record.editable"
                  :value="text"
                  placeholder="请输入"
                  @change="e => handleChange(e.target.value, record.key, 'name')"
                ></BaseInput>
                <span v-else>{{text}}</span>
              </template>
              <template slot="action" slot-scope=" text,record">
                <span v-if="record.editable">
                  <a @click="() => save(record.key)">保存</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定要取消保存?" @confirm="() => cancel(record.key)">
                    <a>取消</a>
                  </a-popconfirm>
                </span>
                <span v-else>
                  <a :disabled="editingKey !== ''" @click="() => edit(record.key)">编辑</a>
                  <a-divider type="vertical" />
                  <a @click="() => del(record.key)">删除</a>
                </span>
              </template>
            </a-table>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
    <a-card>
      <div class="flex-row">
        <titleName title="检查验收项设置"></titleName>
        <a-button class="ml20" type="primary" @click="addLine1()">添加行</a-button>
      </div>
      <a-table :pagination="false" bordered :columns="columns1" :data-source="dataSource1">
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <!-- 检查项目 -->
        <template
          v-for="col in ['inspectionItem', 'examinationContent']"
          :slot="col"
          slot-scope="text, record"
        >
          <div :key="col">
            <BaseInput
              v-if="record.editable"
              :value="text"
              placeholder="请输入"
              @change="e => handleChange1(e.target.value, record.key, col)"
            ></BaseInput>
            <span v-else>{{text}}</span>
          </div>
        </template>
        <!-- 操作 -->
        <span slot="action" slot-scope=" text,record">
          <span v-if="record.editable">
            <a @click="() => save1(record.key)">保存</a>
            <a-divider type="vertical" />
            <a-popconfirm title="确定要取消保存?" @confirm="() => cancel1(record.key)">
              <a>取消</a>
            </a-popconfirm>
          </span>
          <span v-else>
            <a :disabled="editingKey1 !== ''" @click="() => edit1(record.key)">编辑</a>
            <a-divider type="vertical" />
            <a @click="() => del1(record.key)">删除</a>
          </span>
        </span>
      </a-table>
    </a-card>
  </base-breadcrumb>
</template>
<script>
import { STable } from '@/components'
const columns = [
    {
        title: '名称',
        dataIndex: 'name',
        scopedSlots: { customRender: 'name' },
        width: '80%',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
    },
]
const columns1 = [
    {
        title: '序号',
        dataIndex: 'serial',
        scopedSlots: { customRender: 'serial' },
        width: '10%',
    },
    {
        title: '检查项目',
        dataIndex: 'inspectionItem',
        scopedSlots: { customRender: 'inspectionItem' },
        width: '20%',
    },
    {
        title: '检查内容与要求',
        dataIndex: 'examinationContent',
        scopedSlots: { customRender: 'examinationContent' },
        width: '60%',
    },
    {
        title: '操作',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' },
    },
]
export default {
    name:'a'+Date.now(),    components: {
        STable,
    },
    data() {
        this.columns = columns
        this.columns1 = columns1
        return {
            editingKey: '',
            editingKey1: '',
            formData: {},
            dataSource: [],
            dataSource1: [],
        }
    },
    methods: {
        addLine() {
            this.dataSource.push({
                key: this.dataSource.length.toString(),
                name: '',
                editable: true,
            })
            console.log(this.dataSource)
            this.cacheData = this.dataSource.map((item) => ({ ...item }))
        },
        addLine1() {
            this.dataSource1.push({
                key: this.dataSource1.length.toString(),
                inspectionItem: '',
                examinationContent: '',
                editable: true,
            })
            console.log(this.dataSource1)
            this.cacheData1 = this.dataSource1.map((item) => ({ ...item }))
        },
        del1() {},
        del() {},

        handleChange1(value, key, column) {
            const newData = [...this.dataSource1]
            const target = newData.filter((item) => key === item.key)[0]
            if (target) {
                target[column] = value
                this.dataSource1 = newData
            }
        },
        edit1(key) {
            const newData = [...this.dataSource1]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = key
            if (target) {
                target.editable = true
                this.dataSource1 = newData
            }
        },
        save1(key) {
            const newData = [...this.dataSource1]
            const newCacheData = [...this.cacheData1]
            const target = newData.filter((item) => key === item.key)[0]
            const targetCache = newCacheData.filter((item) => key === item.key)[0]
            if (target && targetCache) {
                delete target.editable
                this.dataSource1 = newData
                Object.assign(targetCache, target)
                this.cacheData1 = newCacheData
            }
            this.editingKey1 = ''
        },
        cancel1(key) {
            const newData = [...this.dataSource1]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = ''
            if (target) {
                Object.assign(target, this.cacheData1.filter((item) => key === item.key)[0])
                delete target.editable
                this.dataSource1 = newData
            }
        },

        handleChange(value, key, column) {
            const newData = [...this.dataSource]
            const target = newData.filter((item) => key === item.key)[0]
            if (target) {
                target[column] = value
                this.dataSource = newData
            }
        },
        edit(key) {
            const newData = [...this.dataSource]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = key
            if (target) {
                target.editable = true
                this.dataSource = newData
            }
        },
        save(key) {
            const newData = [...this.dataSource]
            const newCacheData = [...this.cacheData]
            const target = newData.filter((item) => key === item.key)[0]
            const targetCache = newCacheData.filter((item) => key === item.key)[0]
            if (target && targetCache) {
                delete target.editable
                this.dataSource = newData
                Object.assign(targetCache, target)
                this.cacheData = newCacheData
            }
            this.editingKey = ''
        },
        cancel(key) {
            const newData = [...this.dataSource]
            const target = newData.filter((item) => key === item.key)[0]
            this.editingKey = ''
            if (target) {
                Object.assign(target, this.cacheData.filter((item) => key === item.key)[0])
                delete target.editable
                this.dataSource = newData
            }
        },
    },
}
</script>
<style lang="less">
.flex-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
</style>
